import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import React, { useEffect, useState } from "react";
import ImageListAuto from "./ImageListAout";
import { Https, imgPath } from "../api";
import { styleAll } from "../styleAll";
import { useNavigation } from "@react-navigation/native";

interface RecommendListPropsType {
  sceneId: String;
  returnCount?: Number;
  sceneType: Number;
  sourceId?: Number;
  openId?: String;
  itemId?: String;
}

const width = Dimensions.get("window").width;

const RecommendList = (props: RecommendListPropsType) => {
  const [listData, setListData] = useState([]);
  const navigation = useNavigation();
  const getRecommendList = async () => {
    const { code, msg, data } = await Https.getRecommend({ ...props });
    if (!code) {
      setListData(data);
    }
  };

  useEffect(() => {
    getRecommendList();
  }, []);
  const handleViewDetails = (goodsId: string, goodsColor: string) => {
    navigation.navigate("ProductDetails", { goodsId, goodsColor });
  };
  return (
    <View style={{ ...styles.RecommendListMain, ...styleAll.iosBottom }}>
      <Text style={styles.title}>— 猜你喜欢 —</Text>

      <View style={styles.RecommendContent}>
        {listData.length !== 0 &&
          listData.map(
            ({ id, gscMaincolPath, goodsName, discountPrice ,goodsCode,gsColorCode}, index) => (
              <TouchableOpacity
                activeOpacity={0.8}
                key={id}
                onPress={() => handleViewDetails(goodsCode, gsColorCode)}
              >
                <View style={styles.content}>
                  {/* <ImageListAuto width={"100%"} imgUrl={imgPath + gscMaincolPath} /> */}
                  <Image
                    style={{ ...styles.img }}
                    source={{
                      uri: imgPath + gscMaincolPath,
                    }}
                  />
                  <Text style={styles.text} numberOfLines={2} >{goodsName}</Text>
                  <Text style={{ ...styles.text, color: "red" }}>
                    ￥{discountPrice}
                  </Text>
                </View>
              </TouchableOpacity>
            )
          )}
      </View>
    </View>
  );
};

export default RecommendList;

const styles = StyleSheet.create({
  RecommendListMain: {
    minHeight: 500,
    marginBottom: 150,
    // backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
  },
  title: {
    height: 50,
    fontWeight: "700",
    fontSize: 22,
    lineHeight: 50,
  },
  RecommendContent: {
    flex: 1,
    width: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
  },
  content: {
    width: width * 0.45,
    marginTop: 10,
    marginLeft: width * 0.035,
    borderRadius: 5,
    backgroundColor: "rgb(245, 245, 245)",
  },
  img: {
    width: "100%",
    height: 280,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
  },
  text: {
    padding: 5,
  },
});
